{% extends 'base/base.html' %}
{% load static %}

{% block title %}
Push Notifications
{% endblock title %}

{% block custom_js_css_link %}
<link rel="stylesheet" type="text/css" href="{% static 'assets/css/forms/switches.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/table/datatable/datatables.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'assets/css/forms/theme-checkbox-radio.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/table/datatable/dt-global_style.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/table/datatable/custom_dt_custom.css' %}">
<script src="{% static 'plugins/sweetalerts/promise-polyfill.js' %}"></script>
<link href="{% static 'plugins/sweetalerts/sweetalert2.min.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'plugins/sweetalerts/sweetalert.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'assets/css/components/custom-sweetalert.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'assets/css/components/custom-modal.css' %}" rel="stylesheet" type="text/css" />
{% endblock custom_js_css_link %}

{% block breadcrumb_title %}
Push Notifications
{% endblock breadcrumb_title %}

{% block main_content %}
<div class="col-lg-12 layout-spacing">
    <div class="col-lg-12">
        <div class="statbox widget box box-shadow">
            <div class="widget-header">
                <div class="row" style="margin-top: 2%">
                    <div class="col-6">
                        <h4>Push Notification Hooks</h4>
                    </div>
                    <div class="col-6">
                        <a href="{% url 'add_notification_hook' %}" class="btn btn-outline-primary mb-2 float-right">Add New Hook</a>
                    </div>
                </div>
            </div>
            <div class="widget-content widget-content-area">
                <div class="table-responsive mb-4">
                    <table id="style-2" class="table style-2  table-hover">
                        <thead>
                            <tr>
                                <th class="checkbox-column">Serial Number</th>
                                <th>Title</th>
                                <th>Url</th>
                                <th class="text-center">Send Notification</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for hook in all_hooks.all %}
                            <tr>
                                <td class="checkbox-column"> {{ hook.id }} </td>
                                <td>{{ hook.hook_name }}</td>
                                <td>{{ hook.hook_url }}</td>
                                <td class="text-center">
                                    <label class="switch s-icons s-outline s-outline-info">
                                        <input type="hidden" name="domain_id" value="hook.id" />
                                        <input type="checkbox" name="port_scan" {% if hook.send_notif %}checked{% endif %} onchange="change_notif_status({{hook.id}})">
                                        <span class="slider round"></span>
                                    </label>
                                </td>
                                <td class="text-center">
                                    <a onclick="delete_hook({{ hook.id }}, '{{ hook.hook_name }}')" class="bs-tooltip btnDelHook" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete Notification Hook">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather table-delete feather-x-circle">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <line x1="15" y1="9" x2="9" y2="15"></line>
                                            <line x1="9" y1="9" x2="15" y2="15"></line>
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock main_content %}


{% block page_level_script %}
<script src="{% static 'custom/custom.js' %}"></script>
<script src="{% static 'notification/js/custom_notif.js' %}"></script>
<script src="{% static 'plugins/table/datatable/datatables.js' %}"></script>
<script src="{% static 'plugins/sweetalerts/sweetalert2.min.js' %}"></script>
<script src="{% static 'plugins/sweetalerts/custom-sweetalert.js' %}"></script>
<script>
// var e;
c1 = $('#style-2').DataTable({
    headerCallback:function(e, a, t, n, s) {
        e.getElementsByTagName("th")[0].innerHTML='<label class="new-control new-checkbox checkbox-outline-info m-auto">\n<input type="checkbox" class="new-control-input chk-parent select-customers-info" id="customer-all-info">\n<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>\n</label>'
    },
    columnDefs:[ {
        targets:0, width:"30px", className:"", orderable:!1, render:function(e, a, t, n) {
            return'<label class="new-control new-checkbox checkbox-outline-info  m-auto">\n<input type="checkbox" class="new-control-input child-chk select-customers-info" id="customer-all-info">\n<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>\n</label>'
        }
    }],
    "oLanguage": {
        "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
        "sInfo": "Showing page _PAGE_ of _PAGES_",
        "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
        "sSearchPlaceholder": "Search...",
        "sLengthMenu": "Results :  _MENU_",
    },
    "lengthMenu": [5, 10, 20, 50],
    "pageLength": 5
});
multiCheck(c1);
</script>
{% endblock page_level_script %}
